<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="/images/index/logo.ico">
    <style>
        .refresh {
            display: inline-block;
            float: right;
        }

        .form-group {
            margin-bottom: 40px;
        }
    </style>
</head>
<body>

<div class="refresh">
    <button class="btn btn-info search" data-url="/adminIndex/admin/addIndex" title="刷新"><span
            class="glyphicon glyphicon-refresh"></span></button>
</div>
<div class="" style="margin-bottom: 65px;">
    <ol class="breadcrumb">
        <li><a data-url="/adminIndex/admin/home">首页管理</a></li>
        <li><a data-url="/adminIndex/admin/list">banner图更换</a></li>
        <li class="active">banner图添加</li>
    </ol>
</div>
<form class="form-horizontal" enctype="multipart/form-data" method="post" action="/adminIndex/admin/submitIndex">
    <div class="form-group">
        <label for="inputFile" class="col-sm-2 control-label">banner标题</label>
        <div class="col-sm-3">
            <input type="text" id="" class="col-sm-10 form-control" name="title" placeholder="banner说明">

        </div>

    </div>
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">类型</label>
        <div class="col-sm-3">
            <select class="form-control" name="type">
                <option value="0">首页banner图</option>
                <option value="1">案例banner图</option>
            </select>

        </div>
    </div>

    <div class="form-group">
        <label for="inputFile" class="col-sm-2 control-label">文字图片</label>
        <div class="col-sm-10">
            <input type="file" id="inputFile" class="hidden" name="image">
            <a class="btn btn-info text_img1"><span class="glyphicon glyphicon-picture"></span> 添加图片</a>
        </div>
        <div class="col-sm-10 first_img col-sm-offset-2" style="margin-top: 20px;">
            <img src="" alt="" class="text_img_show" width="250px" height="150px" style="background-color: #aeaeae;">
        </div>
    </div>
    <div class="form-group">
        <label for="inputFile1" class="col-sm-2 control-label">banner背景图片</label>
        <div class="col-sm-10">
            <input type="file" id="inputFile1" class="hidden" name="bImage">
            <a class="btn btn-info banner_img text_img2"><span class="glyphicon glyphicon-picture"></span> 添加图片</a>
        </div>
        <div class="col-sm-10 second_img col-sm-offset-2" style="margin-top: 20px;">
            <img src="" alt="" class="text_img_show1" width="250px" height="150px">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-default submit">确定</button>
        </div>
    </div>
</form>
<script src="/sources/dist/js/jquery.form.js"></script>
<script src="/sources/dist/js/submitForm.js"></script>
<script>

    $(document).ready(function () {
        $('.search').click(function () {
            var scope = $(this);
            $('.content_right').load(scope.attr('data-url'));
            toast_text('刷新成功', 600);
        });
        $('.text_img_show').hide();
        $('.text_img_show1').hide();

        $('.text_img1').click(function () {
            $('#inputFile').trigger('click');
        });
        $('.text_img2').click(function () {
            $('#inputFile1').trigger('click');
        });
        $('#inputFile').change(function (e) {
            img_show($(this), $('.first_img img'));
            $('.text_img_show').show();

        });
        $('#inputFile1').change(function (e) {
            img_show($(this), $('.second_img img'));
            $('.text_img_show1').show();
        });

//       图片提交
        function img_show(obj, img_class) {
            var reader = new FileReader();
            var files = obj[0].files[0];
            reader.onload = function (e) {
                var imgFile = e.target.result;
                img_class.attr('src', imgFile);
            };
            reader.readAsDataURL(files);
        }

//
        $('.breadcrumb a').click(function () {
            if ($(this).attr('data-url')) {
                $('.content_right').load($(this).attr('data-url'));
            }
        });


    });
</script>
</body>
</html>